<template>
	<view class="u-wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label-width="160" :label-position="labelPosition" label="车辆名称" prop="name">
				<u-input :border="border" placeholder="请输入车辆名称" v-model="model.carName" type="text"></u-input>
			</u-form-item>
			<view class="form_item">
				<view class="label">
					<text>器材种类及数量</text>
					<text class="addIcon iconfont icon-add" @click="addEquipment('car')"></text>
				</view>
				<view class="list u-flex" v-for="(item, ind) in model.typeList" :key="ind">
					<view class="inputBox u-flex-1">
						<u-input
							:border="true"
							type="select"
							:select-open="equipmentShow"
							v-model="item.type"
							placeholder="请选择器材类型"
							@click="equipmentSelect(ind)"
						></u-input>
					</view>
					<view class="inputBox u-flex-1"><u-input :border="true" placeholder="请输入器材数量" v-model="item.number" type="text"></u-input></view>
					<text class="delete iconfont icon-clear" @click="deleteList('typeList',ind)"></text>
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text>库存装备种类及数量</text>
					<text class="addIcon iconfont icon-add" @click="addEquipment('storage')"></text>
				</view>
				<view class="list u-flex" v-for="(item, ind) in model.equipList" :key="ind">
					<view class="inputBox u-flex-1">
						<u-input :border="true" type="select" :select-open="equipShow" v-model="item.type" placeholder="请选择装备类型" @click="equipSelect(ind)"></u-input>
					</view>
					<view class="inputBox u-flex-1"><u-input :border="true" placeholder="请输入装备数量" v-model="item.number" type="text"></u-input></view>
					<text class="delete iconfont icon-clear" @click="deleteList('equipList',ind)"></text>
				</view>
			</view>
			<u-form-item label-width="160" :label-position="labelPosition" label="存放位置" prop="place">
				<u-input :border="border" placeholder="请输入存放位置" v-model="model.place" type="text"></u-input>
			</u-form-item>
			<u-form-item label-width="160" :label-position="labelPosition" label="救援类型" prop="helpType">
				<u-input :border="border" type="select" :select-open="helptypeShow" v-model="model.helpType" placeholder="请选择救援类型" @click="helptypeShow = true"></u-input>
			</u-form-item>
			<u-form-item label-width="160" :label-position="labelPosition" label="购买时间" prop="buyTime">
				<u-input :border="border" type="picker" v-model="model.buyTime" placeholder="请选择购买时间" @click="buyTimeShow = true"></u-input>
			</u-form-item>
			<u-form-item label-width="160" :label-position="labelPosition" label="使用年限" prop="useYear">
				<u-input :border="border" placeholder="请输入使用年限" v-model="model.useYear" type="text"></u-input>
			</u-form-item>
			<view class="form_item">
				<view class="label"><text>车辆或装备图片</text></view>
				<view><u-upload ref="equipPic" width="160" height="160" upload-text="上传图片" :auto-upload="false"></u-upload></view>
			</view>
			<u-form-item label-width="160" :label-position="labelPosition" label="车辆手册">
				<u-upload ref="carUse" width="160" height="160" upload-text="上传车辆手册" :auto-upload="false"></u-upload>
			</u-form-item>
			<u-form-item label-width="160" :label-position="labelPosition" label="装备手册">
				<u-upload ref="equipUse" width="160" height="160" upload-text="上传装备手册" :auto-upload="false"></u-upload>
			</u-form-item>
			<view class="u-m-t-40"><u-button type="primary">提交</u-button></view>
		</u-form>
		<u-action-sheet :list="equipmentList" v-model="equipmentShow" @click="equipmentCallback"></u-action-sheet>
		<u-action-sheet :list="equipList" v-model="equipShow" @click="equipmentCallback"></u-action-sheet>
		<u-action-sheet :list="helpTypeList" v-model="helptypeShow" @click="helpCallback"></u-action-sheet>
		<u-picker mode="time" v-model="buyTimeShow" :params="params" @confirm="buyTimerConfirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			border: false,
			labelPosition: 'left',
			rules: [],
			errorType: ['message'],
			model: {
				carName: '',
				typeList: [{ type: '', number: '' }],
				equipList: [{ type: '', number: '' }],
				place: '',
				helpType: '',
				useYear: '',
				buyTime: ''
			},
			equipmentShow: false,
			equipShow: false,
			equipInd: 0,
			equipmentInd: 0,
			helptypeShow: false,
			equipmentList: ['麻绳', '灭火器', '消防服'],
			equipList: ['麻绳', '灭火器', '消防服'],
			helpTypeList: ['抢险', '救火'],
			buyTimeShow: false,
			params: {
				year: true,
				month: true,
				day: true
			}
		};
	},
	methods: {
		equipmentCallback(index) {
			const obj = this.model.typeList[this.equipmentInd];
			obj.type = this.equipmentList[index];
			his.model.typeList[this.equipmentInd] = obj;
		},
		addEquipment(type) {
			const _obj = { type: '', number: '' };
			if (type == 'car') {
				this.model.typeList.push(_obj);
			} else {
				this.model.equipList.push(_obj);
				equipList;
			}
		},
		helpCallback(index) {},
		equipmentSelect(ind) {
			this.equipmentInd = ind;
			this.equipmentShow = true;
		},
		equipSelect(ind) {
			this.equipInd = ind;
			this.equipShow = true;
		},
		buyTimerConfirm(e) {},
		deleteList(type,ind){
			const list = this.model[type];
			if(list.length<=1){
				return false;
			}
			const _list = list.splice(ind,1);
			this.model[type] = _list;
		}
	}
};
</script>

<style lang="scss" scoped>
	.u-wrap{
		padding:0 20rpx;
	}
</style>
